//功能一：菜单显示功能（全部商品分类）（10分）
$(function() {
    $("h3").hover(function() {
        $(this).find("a").css("color", "#000")
        $(this).css("background-color", "#fff")
        $(this).siblings("div").toggle();
    }, function() {
        $(this).find("a").css("color", "#fff")
        $(this).css("background-color", "#c81523")
        $(this).siblings("div").toggle();
    })
});


//功能二：快速定位搜索框功能（10分）
$(function() {
    $(document).on("keyup", function(e) {
        if (e.keyCode == 83) {
            $("body,html").animate({ scrollTop: 0 }, 200);
            $("#autocomplete").focus();
        }
    })

})


//功能三：回到顶部功能（10分）
$(function() {
    //重点看可参考：all.js中的tbar-tab-selected类的效果，也可自己设置样式
    $(".toolbar-tab,.tbar-tab-top").on({
        "mouseover": function() {
            $(this).css("background-color", "#c81523")
        },
        "mouseout": function() {
            $(this).css("background-color", "#666")
        },
        "click": function() {
            $("body,html").animate({ scrollTop: 0 }, 200);
        }
    })

})


//功能四：轮播功能（20分）
$(function() {
    var a = document.querySelector(".hot").firstElementChild.cloneNode("true");
    $(".hot").append(a);
    $(".hot").width($("#myCarousel").innerWidth() * $(".hot>li").length);
    var i = 0;
    var flag = true;
    $(".left").on("click", function() {
        if (i == 0) {
            $(".hot").css({ left: -($(".hot>li").length - 1) * $("#myCarousel").innerWidth() });
            i = $(".hot>li").length - 1;
        }
        i--;
        if (flag) {
            flag = false;
            $(".hot").animate({ left: -i * $("#myCarousel").innerWidth() }, 200, function() {
                flag = true;
            });
        }
        circle(i);
    })
    $(".right").on("click", function() {
        if (i == 5) {
            $(".hot").css({ left: 0 });
            i = 0;
        }
        if (flag) {
            flag = false;
            i++;
            $(".hot").animate({ left: -i * $("#myCarousel").innerWidth() }, 200, function() {
                flag = true;
            });
        }
        circle(i);
    })
    var time = setInterval(function() {
        $(".right").click();
    }, 3000)
    $("#myCarousel").hover(function() {
        clearInterval(time);
    }, function() {
        time = setInterval(function() {
            $(".right").click();
        }, 3000)
    })

    function circle(i) {
        $(".circle-item").removeClass("active");
        $(".circle-item").each(function(index, e) {
            var a = i % ($(".hot>li").length - 1)
            if (index == a) {
                $(e).addClass("active");
            }
        })
    }
})